<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>用户</title>

    <script src="/ss/static/js/jquery/jquery-2.1.4.min.js" type="text/javascript"></script>
    <script src="/ss/static/layui/layui.js" type="text/javascript"></script>
    <script src="/ss/static/js/index/index.js" type="text/javascript"></script>
    <script src="/ss/static/layui/lay/modules/layer.js" type="text/javascript"></script>
    <script src="/ss/static/js/index/sliders.js" type="text/javascript"></script>
    <script src="/ss/static/js/index/html5.js" type="text/javascript"></script>
    <script src="/ss/static/js/index/freezeheader.js" type="text/javascript"></script>
    <script src="/ss/static/js/custom.js" type="text/javascript"></script>
    <link rel="stylesheet" href="/ss/static/layui/css/layui.css" media="all"/>
    <link rel="stylesheet" href="/ss/static/layui/css/modules/layer/default/layer.css"/>
    <link rel="stylesheet" href="/ss/static/css/global.css"/>
</head>

<body>
<div th:replace="template.html::header"></div>

<div class="layui-container container">
    <div class="layui-row layui-col-space20">
        <div class="layui-col-md10">
            <form class="layui-form" method="post" action="users">
                <div class="layui-form-item" style="display: flex;justify-content: center;">
                    <div class="layui-input-inline" style="width:76%;">
                        <input type="text" name="keyword" lay-verify="required" placeholder="请输入关键字"
                               class="layui-input">
                    </div>
                    <button class="layui-btn" lay-filter="*" lay-submit="">搜索</button>
                </div>
            </form>
            <div class="article-main">
                <h2>
                    用户列表
                </h2>
                <div th:each="u : ${users}" class="article-list ss-user"
                     th:style="${uStat.index < 10 ? '' : 'display: none'}">
                    <img style="max-width: 80px;max-height: 80px;margin: 0 50px;" th:src="${u.getFace()}">
                    <ul>
                        <h3>
                            <a th:text="${u.getName()}"></a>
                        </h3>
                        <p class="autor_2">
                            <span>
                                <svg style="vertical-align: middle" width="15"
                                     height="15" viewBox="0 0 48 48"
                                     fill="none"
                                     xmlns="http://www.w3.org/2000/svg">
                                <circle cx="24" cy="12" r="8" fill="none"
                                        stroke="#333" stroke-width="4"
                                        stroke-linecap="round"
                                        stroke-linejoin="round"></circle>
                                <path
                                        d="M42 44C42 34.0589 33.9411 26 24 26C14.0589 26 6 34.0589 6 44" stroke="#333"
                                        stroke-width="4" stroke-linecap="round"
                                        stroke-linejoin="round"></path></svg>
                                <a th:text="${u.getAccount()}"></a>
                            </span>
                            <span>
                                <svg style="vertical-align: middle" width="15" height="15" viewBox="0 0 48 48"
                                     fill="none" xmlns="http://www.w3.org/2000/svg"><path
                                        d="M42.1691 29.2451L29.2631 42.1511C28.5879 42.8271 27.6716 43.2069 26.7161 43.2069C25.7606 43.2069 24.8444 42.8271 24.1691 42.1511L8 26V8H26L42.1691 24.1691C43.5649 25.5732 43.5649 27.841 42.1691 29.2451Z"
                                        fill="none" stroke="#333" stroke-width="4" stroke-linejoin="round"/><path
                                        fill-rule="evenodd" clip-rule="evenodd"
                                        d="M18.5 21C19.8807 21 21 19.8807 21 18.5C21 17.1193 19.8807 16 18.5 16C17.1193 16 16 17.1193 16 18.5C16 19.8807 17.1193 21 18.5 21Z"
                                        fill="#333"/></svg>
                                <a th:text="${T(io.github.harmonly.util.RoleUtil).getName(u)}"></a>
                            </span>
                            <span th:if="${user.getRole().equals('admin')}">
                                <svg style="vertical-align: middle" width="15" height="15" viewBox="0 0 48 48"
                                     fill="none"
                                     xmlns="http://www.w3.org/2000/svg"><path d="M7 42H43" stroke="#333"
                                                                              stroke-width="4"
                                                                              stroke-linecap="round"
                                                                              stroke-linejoin="round"/><path
                                        d="M11 26.7199V34H18.3172L39 13.3081L31.6951 6L11 26.7199Z" fill="none"
                                        stroke="#333"
                                        stroke-width="4" stroke-linejoin="round"/></svg>
                                <a style="cursor: pointer" th:onclick="'openPanel('+${u.getUid()}+')'">编辑信息</a>
                            </span>
                            <span th:if="${user.getRole().equals('admin')}">
                                <svg width="15" height="15" viewBox="0 0 48 48" fill="none"
                                     xmlns="http://www.w3.org/2000/svg" style="vertical-align: middle;"><path
                                        d="M9 10V44H39V10H9Z" fill="none" stroke="#333" stroke-width="4"
                                        stroke-linejoin="round" style="
"></path><path d="M20 20V33" stroke="#333" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"></path><path
                                        d="M28 20V33" stroke="#333" stroke-width="4" stroke-linecap="round"
                                        stroke-linejoin="round"></path><path d="M4 10H44" stroke="#333" stroke-width="4"
                                                                             stroke-linecap="round"
                                                                             stroke-linejoin="round"></path><path
                                        d="M16 10L19.289 4H28.7771L32 10H16Z" fill="none" stroke="#333" stroke-width="4"
                                        stroke-linejoin="round"></path></svg>
                                <a style="cursor: pointer"
                                   th:onclick="'deleteEntity('+${u.getUid()}+', \'user\')'">删除用户</a>
                            </span>
                    </ul>
                </div>
            </div>
            <!--分页-->
            <div id="page">
                <div class="layui-box layui-laypage layui-laypage-default" id="layui-laypage-1">
                    <a href="javascript:" class="layui-laypage-prev layui-disabled" data-page="0">上一页</a>
                    <span class="layui-laypage-curr">
                        <em class="layui-laypage-em"></em><em>1</em>
                    </span><a href="javascript:" data-page="2">2</a>
                    <a href="javascript:" data-page="3">3</a>
                    <a href="javascript:" data-page="4">4</a>
                    <a href="javascript:" data-page="5">5</a><span
                        class="layui-laypage-spr">…</span>
                    <a href="javascript:" class="layui-laypage-last" title="尾页" data-page="10">10</a>
                    <a href="javascript:" class="layui-laypage-next" data-page="2">下一页</a></div>
            </div>
        </div>
    </div>

    <div id='user-panel'
         style="left: 0;top:0;right: 0;bottom:0;display: none;justify-content: center;align-content: center;position: fixed;z-index: 10;background-color: rgba(0,0,0,0.5)">
        <div style="width: auto;height: auto;padding: 0 100px;border-radius: 30px;display: flex;flex-direction: column;align-items: center;align-self: center;background-color: whitesmoke">
            <h2 style="font-weight: bold;font-size: 25px;margin-top: 30px">修改用户信息</h2>
            <div style="display: flex;margin-top: 20px;">
                <p style="align-self: center">用户名:&nbsp;</p>
                <input class="layui-input" style="align-self: center;width: 200px" id="user-name" placeholder="用户名">
            </div>
            <div style="display: flex;margin-top: 20px;">
                <p style="align-self: center">账号:&nbsp;</p>
                <input class="layui-input" style="align-self: center;width: 200px" id="user-account" placeholder="账号"
                       disabled/>
            </div>
            <div style="display: flex;margin-top: 20px;">
                <p style="align-self: center">角色:&nbsp;</p>
                <input class="layui-input" style="align-self: center;width: 200px" id="user-role"
                       placeholder="role"/>
            </div>
            <div style="display: flex;margin-top: 20px;">
                <p style="align-self: center">头像网址:&nbsp;</p>
                <input class="layui-input" style="align-self: center;width: 200px" id="user-face" placeholder="头像"/>
            </div>
            <button class="layui-btn" style="margin-top: 15px;cursor: pointer;margin-bottom: 30px" id="user-button">修改
            </button>
        </div>
    </div>
</div>

<div th:replace="template.html::footer"></div>

<script type="text/javascript">
    function openPanel(uid) {
        var panel = document.getElementById('user-panel');
        panel.style.display = 'flex'
        var user = {}
        $.ajax({
            url: 'api/user/' + uid,
            type: 'get',
            success: function (result) {
                user = result
                document.getElementById('user-name').value = result['name']
                document.getElementById('user-account').value = result['account']
                document.getElementById('user-role').value = result['role']
                document.getElementById('user-face').value = result['face']
            }
        })
        document.getElementById('user-button').onclick = () => {
            user['name'] = document.getElementById('user-name').value
            user['role'] = document.getElementById('user-role').value
            user['face'] = document.getElementById('user-face').value
            $.ajax({
                url: 'api/user',
                type: 'put',
                data: JSON.stringify(user),
                dataType: "json",
                contentType: "application/json;charset=utf-8",
                success: function (result) {
                    if (result['success']) location.reload()
                    else alert('修改用户失败')
                }
            })
        }
        window.addEventListener('mousedown', (event) => {
            if (event.target.id === 'user-panel')
                panel.style.display = 'none'
        })
    }
</script>
</body>
</html>
